<template>
	<view class="vip-container">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 返回按钮 -->
	
		
		<!-- VIP专属标题 -->
		<view class="vip-header">
			<image src="https://ts1.tc.mm.bing.net/th/id/R-C.a677df796c1d46d98ab00092b8d1261f?rik=ndH9qNeeBpbpqQ&riu=http%3a%2f%2fy1.ifengimg.com%2fa%2f2015_10%2fc6d05b0ebc87d0a.jpg&ehk=fNcHMggzoFWhi65FbZIlciPQiR4hggNnGkCUZ6Fpfq8%3d&risl=&pid=ImgRaw&r=0" mode="aspectFill" class="vip-bg"></image>
			<view class="vip-overlay"></view>
			<view class="vip-title-content">
				<text class="vip-badge">尊贵VIP专享</text>
				<text class="vip-main-title">免费礼遇专区</text>
				<text class="vip-sub-title">感谢您的支持，请选择您的专属礼物</text>
			</view>
		</view>
		
		<!-- 礼遇说明 -->
		<view class="vip-info">
			<view class="info-card">
				<view class="info-icon">
				<uni-icons type="vip" color="yellow" :size="26"></uni-icons>
				</view>
				<view class="info-content">
					<text class="info-title">尊享礼遇</text>
					<text class="info-desc">您已累计消费超过10,000元，可免费选择1件专属礼品</text>
				</view>
			</view>
		</view>
		
		<!-- 可选礼品列表 -->
		<view class="gift-section">
			<text class="section-title">专属礼品</text>
			
			<view class="gift-list">
				<view class="gift-item" v-for="(gift, index) in giftList" :key="index" 
					:class="{'selected': selectedGift === gift.id}"
					@tap="selectGift(gift)">
					<view class="gift-image-container">
						<image :src="gift.image" mode="aspectFill" class="gift-image"></image>
						<view class="gift-value">价值 ¥{{gift.value}}</view>
					</view>
					<view class="gift-info">
						<text class="gift-name">{{gift.name}}</text>
						<text class="gift-desc">{{gift.description}}</text>
						<view class="gift-tags">
							<text class="gift-tag" v-for="(tag, tagIndex) in gift.tags" :key="tagIndex">{{tag}}</text>
						</view>
					</view>
					<view class="select-indicator" v-if="selectedGift === gift.id">
						<uni-icons type="checkmarkempty" :size="16"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部确认按钮 -->
		<view class="bottom-actions">
			<view class="selected-info" v-if="selectedGift">
				<text class="selected-label">已选择:</text>
				<text class="selected-name">{{getSelectedGiftName()}}</text>
			</view>
			<button class="confirm-btn" @tap="confirmSelection" :disabled="!selectedGift">
				确认领取
			</button>
		</view>
		
		<!-- 领取成功弹窗 -->
		<view class="success-modal" v-if="showSuccessModal">
			<view class="modal-mask" @tap="closeModal"></view>
			<view class="modal-content">
				<view class="modal-icon">
					<uni-icons type="auth" color="#ffff" :size="36"></uni-icons>
				</view>
				<text class="modal-title">领取成功</text>
				<text class="modal-desc">您的专属礼品已成功领取</text>
				<text class="modal-info">{{getSelectedGiftName()}} </text>
				<button class="modal-btn" @tap="closeModal">我知道了</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedGift: null,
			showSuccessModal: false,
			giftList: [
				{
					id: 1,
					name: '手工线装金刚经',
					description: '采用传统线装工艺，优质宣纸手工印刷，值得珍藏',
					image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.kXeA7a5gqIXw22Mmnv7NWgHaEK?rs=1&pid=ImgDetMain',
					value: 699,
					tags: ['限量版', '手工制作']
				},
				{
					id: 2,
					name: '紫砂倒流香炉套装',
					description: '宜兴原矿紫砂工艺，倒流设计，送香料精选礼盒',
					image: 'https://img.alicdn.com/bao/uploaded/i2/TB1VW58fBcHL1JjSZFBYXGiGXXa_M2.SS2',
					value: 599,
					tags: ['匠心工艺', '禅意生活']
				},
				{
					id: 3,
					name: '手绘禅意画卷',
					description: '国画大师手绘，纯手工装裱，附收藏证书',
					image: 'https://img.alicdn.com/bao/uploaded/i1/869856172/O1CN016sv7me1vSpEozyakb_!!0-item_pic.jpg',
					value: 999,
					tags: ['艺术收藏', '大师手绘']
				},
				{
					id: 4,
					name: '檀木佛珠礼盒',
					description: '印度老山檀木，108颗手珠，配精美檀木礼盒',
					image: 'https://cbu01.alicdn.com/img/ibank/2019/926/729/10887927629_1723734573.jpg',
					value: 799,
					tags: ['天然檀木', '收藏精品']
				},
				{
					id: 5,
					name: '莲花纯铜香插套装',
					description: '纯铜精铸，莲花造型，三件套设计，送精品檀香',
					image: 'https://cbu01.alicdn.com/img/ibank/O1CN01lkCPjv1QYYCToQ0Uq_!!2214986111988-0-cib.jpg',
					value: 459,
					tags: ['纯铜工艺', '禅意礼品']
				}
			]
		}
	},
	onLoad(){
	
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 选择礼品
		selectGift(gift) {
			this.selectedGift = gift.id;
		},
		
		// 获取选中礼品名称
		getSelectedGiftName() {
			const gift = this.giftList.find(item => item.id === this.selectedGift);
			return gift ? gift.name : '';
		},
		
		// 确认领取
		confirmSelection() {
			if (!this.selectedGift) {
				uni.showToast({
					title: '请先选择礼品',
					icon: 'none'
				});
				return;
			}
			
			// 这里应该调用后端API记录领取信息
			// 模拟API调用
			uni.showLoading({
				title: '领取中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				this.showSuccessModal = true;
			}, 1500);
		},
		
		// 关闭成功弹窗
		closeModal() {
			this.showSuccessModal = false;
			// 可以选择返回上一页或者跳转到订单页
			setTimeout(() => {
				uni.navigateBack();
			}, 300);
		},
		
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F2EA;
	font-family: "思源宋体", serif;
}

.vip-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
}

.status-bar {
	height: var(--status-bar-height);
	width: 100%;
}

.back-button {
	position: fixed;
	top: calc(var(--status-bar-height) + 20rpx);
	left: 30rpx;
	z-index: 100;
	width: 70rpx;
	height: 70rpx;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	
	.iconfont {
		color: #6A4C29;
		font-size: 36rpx;
	}
}

/* VIP专属标题 */
.vip-header {
	width: 100%;
	height: 400rpx;
	position: relative;
	
	.vip-bg {
		width: 100%;
		height: 100%;
	}
	
	.vip-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%);
	}
	
	.vip-title-content {
		position: absolute;
		bottom: 60rpx;
		left: 40rpx;
		color: #fff;
		
		.vip-badge {
			display: inline-block;
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
			color: #6A4C29;
			font-size: 24rpx;
			padding: 6rpx 20rpx;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
		}
		
		.vip-main-title {
			font-family: "汉仪尚巍手书", "思源宋体", serif;
			font-size: 50rpx;
			display: block;
			margin-bottom: 10rpx;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}
		
		.vip-sub-title {
			font-size: 28rpx;
			opacity: 0.9;
			display: block;
		}
	}
}

/* 礼遇说明 */
.vip-info {
	padding: 40rpx;
	
	.info-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}
	
	.info-icon {
		width: 80rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		
		.iconfont {
			color: #6A4C29;
			font-size: 40rpx;
		}
	}
	
	.info-content {
		flex: 1;
	}
	
	.info-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.info-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}
}

/* 礼品部分 */
.gift-section {
	padding: 0 40rpx 120rpx;
	
	.section-title {
		font-family: "汉仪尚巍手书", "思源宋体", serif;
		font-size: 36rpx;
		color: #6A4C29;
		display: block;
		margin-bottom: 30rpx;
		position: relative;
		padding-left: 20rpx;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 15rpx;
			height: 30rpx;
			width: 6rpx;
			background-color: #C8A675;
			border-radius: 3rpx;
		}
	}
}

/* 礼品列表 */
.gift-list {
	.gift-item {
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
		position: relative;
		transition: all 0.3s ease;
		
		&.selected {
			border: 2rpx solid #C8A675;
			box-shadow: 0 10rpx 30rpx rgba(200, 166, 117, 0.2);
		}
	}
	
	.gift-image-container {
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;
		
		.gift-image {
			width: 100%;
			height: 100%;
		}
		
		.gift-value {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.6);
			color: #FFD700;
			font-size: 24rpx;
			padding: 5rpx 0;
			text-align: center;
		}
	}
	
	.gift-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.gift-name {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.gift-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		margin-bottom: 15rpx;
	}
	
	.gift-tags {
		display: flex;
		flex-wrap: wrap;
	}
	
	.gift-tag {
		font-size: 22rpx;
		color: #C8A675;
		background-color: rgba(200, 166, 117, 0.1);
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
		margin-right: 10rpx;
		margin-bottom: 5rpx;
	}
	
	.select-indicator {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: #C8A675;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.iconfont {
			color: #fff;
			font-size: 30rpx;
		}
	}
}

/* 底部确认按钮 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx;
	box-shadow: 0 -5rpx 15rpx rgba(0, 0, 0, 0.05);
	
	.selected-info {
		margin-bottom: 20rpx;
		padding: 0 10rpx;
		
		.selected-label {
			font-size: 24rpx;
			color: #666;
			margin-right: 10rpx;
		}
		
		.selected-name {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.confirm-btn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&[disabled] {
			opacity: 0.5;
		}
	}
}

/* 成功弹窗 */
.success-modal {
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
	}
	
	.modal-content {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		z-index: 999;
		text-align: center;
	}
	
	.modal-icon {
		width: 100rpx;
		height: 100rpx;
		background-color: #C8A675;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 30rpx;
		
		.iconfont {
			color: #fff;
			font-size: 50rpx;
		}
	}
	
	.modal-title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.modal-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
		display: block;
	}
	
	.modal-info {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 40rpx;
		display: block;
		line-height: 1.5;
	}
	
	.modal-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
		color: #fff;
		font-size: 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

</style>